{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:grid.html.twig' import gridWidth,gridNav,gridConfig %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import timebutton,searchtime,searchForm,searchFormBtn %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@datepicker_css'
    '@jqgird_css'
    '@gritter_css'
    '@chosen_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

{% endblock %}

{% block content %}
    <form action="javascript:search()" method="post" id="searchForm">
        <div class="widget-container-col">
            <div class="widget-box">
                <div class="widget-body">
                    <div class="widget-main no-padding">
                        <table class="table table-bordered table-hover no-padding">
                            <tbody>
                            {{ timebutton() }}
                            {{ searchForm(options) }}
                            {{ searchtime(date.today.start, date.today.end) }}
                            {{ searchFormBtn() }}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </form>
        <!-- #section:custom/widget-box -->
        <div class="widget-box" style="opacity: 1;">
            <div class="widget-body">
                <div class="widget-main no-padding">
                    <div class="tabbable">
                        <ul id="myTab" class="nav nav-tabs">
                            {% for key, evaluate in evaluates %}
                                <li {% if loop.first == true %} } class="active" {% endif %} data-text="{{ key }}">
                                    <a href="#agent" data-toggle="tab" data-text="{{ key }}"> {{ evaluate }}</a>
                                </li>
                            {% endfor %}
                        </ul>

                        <div class="tab-content">
                            {% for key, evaluate in evaluates %}
                                <div {% if loop.first == true %} } class="tab-pane in active" {% endif %}>
                                    <table id="grid-table"></table>
                                    <div id="grid-pager"></div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@datepicker_js'
    '@jqgird_js'
    '@gritter_js'
    '@common_js'
    '@chosen_js'
    '@bootbox_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="text/javascript">
        var active_id = 0;
        $(function () {
            $('#start_time').datetimepicker({locale:'zh-cn',format:'YYYY-MM-DD HH:mm:ss',widgetPositioning:{horizontal:'left'}});
            $('#end_time').datetimepicker({locale:'zh-cn',format:'YYYY-MM-DD HH:mm:ss',widgetPositioning:{horizontal:'left'}});
            $('.chosen-select').chosen({width: $(".col-sm-6").width()+'px', allow_single_deselect:true});

            /** Tab切换,设置当前Tab */
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                active_id = $(e.target).attr('data-text');
                search();
            });
        });

        jQuery(function($) {
            active_id = $('.active').attr('data-text');
            console.log(active_id);
            {{ gridWidth() }}
            jQuery(grid_selector).jqGrid({
                url: "{{ path('icsoc_evaluate_detaillist') }}",
                mtype: 'POST',
                datatype: "json",
                hidegrid:false,
                postData: {param:jsonToString(getCondition())},
                width: '90%',
                colModel:[
                    {name:'ag_num' , index:'ag_num' , label: '{{ 'Agent'|trans }}' , width:120 , sortable:true , frozen:true , fixed:true},
                    {name:'que_name' , index:'que_name' , label: '{{ 'Queue'|trans }}' ,width:120, sortable:true , fixed:true},
                    {name:'call_time' , index:'call_time' , label: '{{ 'Call Time'|trans }}' , width:145 , sortable:true , fixed:true},
                    {name:'evaluate_time' , index:'evaluate_time' , label: '{{ 'Evaluate Time'|trans }}'  ,width:145 , sortable:true , fixed:true},
                    {name:'evaluate_result' , index:'evaluate_result' , label: '{{ 'Evaluate Result'|trans }}' , width:80 , sortable:true , fixed:true},
                    {name:'call_id' , index:'call_id' , label: '{{ 'Call ID'|trans }}' , width:100 , sortable:true , fixed:true}
                ],
                {{ gridConfig() }}
                height: '326',
                rowNum:10,
                rowList: [10,20,30,50,100],
                rownumWidth: 40,
                viewrecords: true,
                sortname:"id",
                sortorder:'desc',
                multiselect: false,
                rownumbers: true
            });
            {{ gridNav(false,false,false,false,true,false) }}
            jQuery(grid_selector).navButtonAdd(
                    pager_selector,
                    {
                        caption:'{{ 'Export Csv'|trans }}',
                        buttonicon:'ace-icon fa fa-file-excel-o  primary',
                        onClickButton:function() {
                            location.href = "{{ path('icsoc_report_callout_list', {'export': 'csv'})|raw }}&param="+jsonToString(getCondition());
                        }
                    }
            ).navButtonAdd(
                    pager_selector,
                    {
                        caption:'{{ 'Export Excel'|trans }}',
                        buttonicon:'ace-icon fa fa-file-excel-o  primary',
                        onClickButton:function() {
                            location.href = "{{ path('icsoc_report_callout_list', {'export': 'excel'})|raw }}&param="+jsonToString(getCondition());
                        }
                    }
            );
        });

        /**
         * 重置
         */
        function resetBtn()
        {
            $('#searchForm')[0].reset();
            search();
        }

        /**
         * 搜索
         */
        function search()
        {
            $('#grid-table').setGridParam({page:1,postData:{param:jsonToString(getCondition())}}).trigger("reloadGrid");
        }

        /**
         * 获取搜索条件
         */
        function getCondition()
        {
            var $start_time = $('#start_time');
            var $end_time = $('#end_time');

            if (!$start_time.val()) {
                $start_time.parent().parent().addClass('has-error');
                $start_time.focus();
                return;
            }

            if (!$end_time.val()) {
                $end_time.parent().parent().addClass('has-error');
                $end_time.focus();
                return;
            }

            var param = {};

            param.evaluate_result = $.trim($('#evaluate_result').val());
            param.agent_id = $.trim($('#agent_id').val());
            param.call_id = $.trim($('#call_id').val());
            param.que_id = $('#que_id').val();
            param.start_time = $.trim($('#start_time').val());
            param.end_time = $.trim($('#end_time').val());
            param.evaluate_id = active_id;

            return param;
        }

        /**
         * 设置时间
         *
         * @param type
         */
        function fnSetTime(type)
        {
            var $start_time = $('#start_time');
            var $end_time = $('#end_time');

            switch (type) {
                case 1:
                    $start_time.val('{{ date.yestoday.start }}');
                    $end_time.val('{{ date.yestoday.end }}');
                    break;
                case 2:
                    $start_time.val('{{ date.today.start }}');
                    $end_time.val('{{ date.today.end }}');
                    break;
                case 3:
                    $start_time.val('{{ date.lastweek.start }}');
                    $end_time.val('{{ date.lastweek.end }}');
                    break;
                case 4:
                    $start_time.val('{{ date.thisweek.start }}');
                    $end_time.val('{{ date.thisweek.end }}');
                    break;
                case 5:
                    $start_time.val('{{ date.lastmonth.start }}');
                    $end_time.val('{{ date.lastmonth.end }}');
                    break;
                case 6:
                    $start_time.val('{{ date.thismonth.start }}');
                    $end_time.val('{{ date.thismonth.end }}');
                    break;
                case 7:
                    $start_time.val('{{ date.thisyear.start }}');
                    $end_time.val('{{ date.thisyear.end }}');
                    break;
                case 8:
                    $start_time.val('{{ date.lastyear.start }}');
                    $end_time.val('{{ date.lastyear.end }}');
                    break;
            }

            search();
        }
    </script>
{% endblock %}